<template>
  <basic-container>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(row, index) in optionLists" :key="index" :label="row.label" :name="row.name" />
    </el-tabs>
    <component
      :is="require(`@/views/tenant/supplier/info/components/${activeName}`).default"
      @callback="getOtherOption"
      @handleClose="handleClose"
    />
  </basic-container>
</template>

<script>
const addOptionList = [
  { label: '联系人信息', name: 'contacts' },
  { label: '财务信息', name: 'finance' },
  { label: '资质信息', name: 'qualifications' },
  { label: '工厂/产品信息', name: 'factory' },
  { label: '设备/物流信息', name: 'equipment' }
]
export default {
  name: 'OperationPage',
  provide() {
    return { type: this.type, slotFlg: false }
  },
  props: ['type'],
  data() {
    return {
      activeName: 'base-info',
      optionList: [{ label: '基本信息', name: 'base-info' }]
    }
  },
  computed: {
    optionLists: function () {
      if (['add'].includes(this.type)) return this.optionList
      if (['edit', 'view'].includes(this.type)) {
        return this.getOtherOption()
      }
    }
  },
  methods: {
    getOtherOption() {
      this.optionList = [...this.optionList, ...addOptionList]
      return Array.from(new Set(this.optionList))
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
